<template>
  <div>
    <page-main>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="flexRow">
            <span style="width: 120px">设备类型</span>
            <el-select v-model="searchForm.mold_id" filterable clearable placeholder="请选择">
              <el-option v-for="item in moldType" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="flexRow">
            <span style="width: 50px">状态</span>
            <el-select v-model="searchForm.status" filterable clearable placeholder="请选择">
              <el-option v-for="item in status" :key="item.id" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="flexRow">
            <span style="width: 90px">更新时间</span>
            <el-date-picker
              v-model="updata_times"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="x"
            >
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" style="margin-left: 10px" @click="searchBtn">搜索</el-button>
          <el-button type="warning" @click="refreshBtn">重置</el-button>
        </el-col>
      </el-row>
    </page-main>
    <page-main>
      <el-table
        :data="tableData"
        border
        :default-sort="{ prop: 'id', order: 'descending' }"
        v-loading="tableDataLoading"
      >
        <el-table-column label="设备类型" prop="mold_name"></el-table-column>
        <el-table-column label="设备名称" prop="device_name"></el-table-column>
        <el-table-column label="安装位置" prop="address"> </el-table-column>
        <el-table-column label="联网单位" prop="yj_unit_full_name"></el-table-column>
        <el-table-column label="设备状态" prop="status" :formatter="deviceStatus"></el-table-column>
        <el-table-column label="更新时间" prop="update_time" :formatter="getDateTime"></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          v-model:currentPage="tableDataInfo.page"
          :page-count="tableDataInfo.total_page"
          :total="tableDataInfo.total"
          layout="total,prev, pager, next, jumper"
          :hide-on-single-page="false"
          background
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataLoading: false,
      tableDataInfo: '',
      moldType: [],
      updata_times: '',
      searchForm: {
        mold_id: '',
        status: '',
        start_update_time: '',
        end_update_time: ''
      },
      status: [
        // 1. 正常，2.预警，3.故障,4.停用，5报警，6-不在线 7-在线
        { label: '正常', value: 1 },
        { label: '预警', value: 2 },
        { label: '故障', value: 3 },
        { label: '停用', value: 4 },
        { label: '报警', value: 5 },
        { label: '离线', value: 6 }
      ]
    }
  },
  created() {
    this.getDeviceLists()
    this.getMoldType()
  },
  methods: {
    //   搜索
    searchBtn() {
      this.getDeviceLists()
    },
    // 重置
    refreshBtn() {
      this.searchForm = {
        mold_id: '',
        status: '',
        start_update_time: '',
        end_update_time: ''
      }
      this.updata_times = ''
      this.getDeviceLists()
    },
    getDateTime(row, column, cellValue, index) {
      return this.$getDateTime(cellValue)
    },
    deviceStatus(row, column, cellValue, index) {
      let temp = ['', '正常', '预警', '故障', '停用', '报警', '离线']
      return temp[cellValue]
    },
    handleCurrentChange(e) {
      this.getDeviceLists(e)
    },
    getDeviceLists(page) {
      this.tableDataLoading = true
      let pageNum = 1
      if (page) {
        pageNum = page
      }
      let searchParams = JSON.parse(JSON.stringify(this.searchForm))
      if (this.updata_times) {
        searchParams.start_update_time = this.updata_times[0] / 1000
        searchParams.end_update_time = this.updata_times[1] / 1000 + 86400
      }
      let params = {
        page: pageNum,
        rows: 13,
        ...searchParams
      }
      this.$api
        .post('/unit/DeviceInstall/Lists', params)
        .then((res) => {
          this.tableData = res.data.list
          this.tableDataInfo = res.data
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    },
    // 设备类型
    getMoldType() {
      this.$api.get('/unit/DeviceBase/moldTree').then((res) => {
        this.moldType = res.data
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
:deep(.el-range-separator) {
  width: 30px;
}
.flexRow {
  display: flex;
  align-items: center;
}
</style>
